<template>
  <el-card
    class="form-container"
    shadow="never"
  >
    <el-form
      :model="video"
      :rules="rules"
      ref="videoFrom"
      label-width="150px"
      size="small"
    >
      <el-form-item
        label="标题："
        prop="videoName"
      >
        <el-input
          v-model="video.videoName"
          class="input-width"
          placeholder="请输入标题"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="时长："
        prop="videoTime"
      >
        <el-input
          v-model="video.videoTime"
          class="input-width"
          placeholder="请输入时长"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="标清："
        prop="videoAddrLow"
      >
        <el-input
          v-model="video.videoAddrLow"
          class="input-width"
          placeholder="请输入视频url"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="高清："
        prop="videoAddrHigh"
      >
        <el-input
          v-model="video.videoAddrHigh"
          class="input-width"
          placeholder="请输入视频url"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit('videoFrom')"
        >提交</el-button>
        <!--<el-button v-if="!isEdit" @click="resetForm('courseFrom')">重置</el-button>-->
        <el-button @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import { curVideoGetById, curVideoUpdate, curVideoSave } from '@/api/course'

const defaultVideo = {
  videoName: '',
  videoTime: '',
  videoAddrLow: '',
  videoAddrHigh: ''
}
export default {
  name: 'VideoDetail',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      video: {},
      loading: false,
      rules: {
        videoName: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            min: 2,
            max: 20,
            message: '长度在 2 到 20 个字符',
            trigger: 'blur'
          }
        ],
        videoTime: [{ required: true, message: '请输入', trigger: 'blur' }],
        videoAddrLow: [{ required: true, message: '请输入', trigger: 'blur' }],
        videoAddrHigh: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  created () {
    // setTimeout(() => {
    //   this.$refs['videoFrom'].resetFields()
    // }, 0)
    if (this.isEdit) {
      // 获取课程详情
      curVideoGetById({ id: this.$route.query.id }).then((res) => {
        this.video = res.data
        const videoUrl = JSON.parse(this.video.videoAddr)
        this.$set(this.video, 'videoAddrLow', videoUrl[0])
        this.$set(this.video, 'videoAddrHigh', videoUrl[1])
      })
    } else {
      this.video = Object.assign({}, defaultVideo)
    }
  },
  methods: {
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const { videoAddrLow, videoAddrHigh } = this.video
            const params = {
              courseId: this.$route.query.id,
              ...this.video,
              videoAddr: JSON.stringify([videoAddrLow, videoAddrHigh])
            }

            if (this.isEdit) {
              curVideoUpdate(params).then((response) => {
                // this.$refs[formName].resetFields()
                this.$message({
                  message: '修改成功',
                  type: 'success',
                  duration: 1000
                })
                this.$router.back()
              })
            } else {
              curVideoSave(params).then((response) => {
                this.$message({
                  message: '提交成功',
                  type: 'success',
                  duration: 1000
                })
                this.$router.back()
              })
            }
          })
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          })
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.video = Object.assign({}, defaultVideo)
    },
    back () {
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped>
.input-width {
  width: 70%;
}
</style>
